<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>smart-home2</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="vue-app" class="invisiable">
    <div v-show="!isConnected" class="top_error">
        <p>连接中断，正在尝试重连</p>
    </div>

    <div class="weui_cells" v-for="device in devices">

        <div class="weui_cell weui_check_label" v-if="device.type=='switcher'">
            <img :src="device.icon" class="img_light" :class="{gray:!isConnected||!device.value}" alt="">
            <p v-text="device.name"></p>
            <input type="checkbox" :disabled="!isConnected||!device.enable" @change="change(device)"
                   v-model="device.value"
                   class="weui_switch float_right_switch">
        </div>

        <div class="weui_cell weui_check_label" v-if="device.type=='switcher_readonly'">
            <img :src="device.icon" class="img_light" :class="{gray:!isConnected||!device.value}" alt="">
            <p v-text="device.name"></p>
            <input type="checkbox" style="display: none" :disabled="!isConnected||!device.enable"
                   @change="change(device)"
                   v-model="device.value"
                   class="weui_switch float_right_switch">
        </div>

        <!--<div class="weui_cell weui_check_label" v-if="device.type=='dh11'">
            <p style="text-align: center;width: 100%;margin-left: 0" v-html="parseDh11AndLightData(device.value)"></p>
        </div>-->

        <div class="weui_cell weui_check_label" v-if="device.type=='dh11'">
            <div style="flex: 1">
                <div class="table_cell" v-for="cell_data in parseDh11AndLightData(device.value)">
                    <span class="cell_title" v-text="cell_data.name"></span>
                    <span class="cell_value">{{cell_data.value||"--"}}{{cell_data.unit}}</span>
                </div>
            </div>
        </div>

        <div class="weui_cell weui_check_label" v-if="device.type=='slider'">
            <img :src="device.icon" class="img_light" :class="{gray:!isConnected||device.value==0}" alt="">
            <p v-text="device.name"></p>
            <input class="input_slider" :step="device.other.step" :min="device.other.min" :max="device.other.max"
                   type="range"
                   :disabled="!isConnected||!device.enable" @change="change(device)" v-model="device.value">
        </div>
    </div>

    <div class="weui_btn_area">
        <a  href="video.html" class="weui_btn weui_btn_primary">监控视频</a>
    </div>

    <div class="weui_btn_area">
        <a id="qrcode_switcher" href="javascript:;" class="weui_btn weui_btn_primary">分享</a>
    </div>

    <p class="p-center" onclick="window.location.reload()">刷新</p>

    <div class="weui_dialog_alert invisiable" id="qrcode">
        <div class="weui_mask"></div>
        <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">扫一扫分享网页</strong></div>
            <div class="weui_dialog_bd">
                <img width="90%" :src="qrcodeUrl" alt="">
                <p class="info"></p>
            </div>
            <div class="weui_dialog_ft">
                <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
            </div>
        </div>
    </div>


</div>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/vendor/vue.min.js"></script>
<script src="js/devices.js"></script>
<script src="js/app.js"></script>
</body>
</html>